<template>

  <el-card class="box-card">
    <!-- 头部 面包屑 -->
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-button type="primary" plain>添加角色</el-button>

    <el-table :data="rolesList" border stripe style="width: 100%">
      <el-table-column label="#" width="50" type="index"> </el-table-column>

      <el-table-column    prop="authName" label="权限名称" width="180" height="50">
      </el-table-column>
      <el-table-column    prop="path" label="路径" height="50"> </el-table-column>

      <!-- 权限列表展示  层级 -->
      <el-table-column prop="level" label="层级" height="50">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level == 0">标签一</el-tag>
          <el-tag type="success" v-else-if="scope.row.level == 1"
            >标签二</el-tag
          >
          <el-tag type="info" v-else>标签三</el-tag>

        </template>
      </el-table-column>


        <el-table-column  label="操作"  width="400" class="ctrolBox">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-share"
            @click="editeUsers(scope)"
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deleteUsers(scope)"
            >删除</el-button
          >

          <el-tooltip
            class="item"
            effect="dark"
            content="分配权限"
            placement="top"
          >
            <el-button
              type="warning"
              icon="el-icon-setting"
              @click="modifyUsers(scope)"
              >操作权限</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      rolesList: [],
    };
  },

  created() {
    //调用获取所有权限列表的方法
    this.getRolesList();
  },

  methods: {
    //定义获取权限列表的方法
    async getRolesList() {
      var { data: res } = await this.$http.get("rights/list");
      if (res.meta.status != 200) return this.$message.error("请求数据失败");
      this.rolesList = res.data;
    },
  },
};

</script>

<style scoped>
</style>
